<template>
  <div id="app">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <view-box ref="viewBox" body-padding-bottom="0px">

    <router-view style="margin-bottom:60px;"></router-view>
    </view-box>
  </div>
</template>

<script>
 import {XHeader, ViewBox, Loading, TransferDomDirective as TransferDom} from 'vux'
 import {mapState} from 'vuex'
export default {
   directives: {
     TransferDom
   },
   name: 'app',
   data () {
     return {
     }
   },
   computed: {
     ...mapState({
       route: state => state.route,
       path: state => state.route.path,
       deviceready: state => state.app.deviceready,
       demoTop: state => state.vux.demoScrollTop,
       isLoading: state => state.vux.isLoading,
       direction: state => state.vux.direction
     })
   },
   components: {
     ViewBox,
     XHeader,
     Loading
   }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/reset.less';
@import './icon/iconfont.css';
@import './icon/demo.css';
body {
  background-color: #eee;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}
</style>
